<template>
  <div style="display: flex;">
     <van-sidebar v-model="active">
      <van-sidebar-item :title="v.title" v-for="v in tabs" :key="v.id"/>
    </van-sidebar>
    <div style="flex:1;height:100vh;overflow-y:scroll;">
      <List :list="tabs[active].children" v-if="tabs.length"/>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import request  from '@/utils/api'
import List from '@/components/List'
export default {
  name: 'Classify',
  components: {
    List
  },
  setup() {
    const data = reactive({
      active: 1,
      tabs: []
    })

    const getTabs = async () => {
      const resp = await request.get('/api/tabs')
      data.tabs = resp.data.data
    }

    onMounted(() => {
      getTabs()
    })

    return {
      ...toRefs(data)
    }
  }
}
</script>

